<template>
  <div class="exchange">
    <nav-bar title="兑换记录"/>
    <div class="content_scroll">
      <ul class="content_list">
        <li v-for="(item, index) in recordList" :key="index">
          <div class="content_list_title">
            <div>
              <span>兑换奖励：</span>
              <span>{{ item.remarks }}</span>
            </div>
            <div>
              <span>兑换时间：</span>
              <span>{{ item.addtime | formatTimestamp }}</span>
            </div>
          </div>
          <div class="converted">已兑换</div>
        </li>
      </ul>
      <div v-if="recordList === null" class="none_img">
        <img src="../../../../assets/img/server/jy_none1.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '../../../../components/common/navbar/NavBar.vue'

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      recordList: [],
    }
  },
  created() {
    this.getCodeInfo()
  },
  activated() {
    this.getCodeInfo()
  },
  methods: {
    getCodeInfo() {
      this.axios.get('/code_record.json', {}).then(res => {
        console.log(res);
        this.recordList = res.data.list
      })
    }
  },
  filters: {
    formatTimestamp( timestamp ) {
      var dateObj = new Date( timestamp * 1000 );   
      var year = dateObj.getYear() + 1900;
      var month = dateObj.getMonth() + 1;
      var theDate = dateObj.getDate();
      var hour = dateObj.getHours();
      var minute = dateObj.getMinutes();
      minute = minute < 10? '0' + minute : minute;
      var second = dateObj.getSeconds();
      second = second < 10? '0' + second : second;
      return year +"-"+ month +"-" + theDate + " "+ hour +":"+ minute +":"+ second;     
    }
  }
}
</script>

<style scoped>
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1.173333rem;
  box-sizing: border-box;
  padding: 0 .426667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
}

.nav-icon {
  width: 1.76rem;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: .48rem;
  font-weight: 700;
  color: #222222;
}

.nav-btn {
  width: 1.76rem;
}

.content {
  width: 10rem;
  position: fixed;
  top: 1.173333rem;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f8f8f8;
  overflow: scroll;
}

.content_list {
  padding: 0 .426667rem .32rem;
}

.content_list li {
  box-sizing: border-box;
  padding: .266667rem;
  margin-top: .133333rem;
  width: 100%;
  height: 1.733333rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: .266667rem;
}

.content_list_title {
  height: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: .346667rem;
  color: #333333;
}

.content_list_title div:first-child span:last-child {
  color: #ff5543;
  font-weight: bold;
}

.converted {
  width: 1.173333rem;
  height: 1.173333rem;
  background: #eeeeee;
  border-radius: 50%;
  text-align: center;
  line-height: 1.173333rem;
  font-size: .32rem;
  color: #777777;
}

.none_img {
  margin-left: .2rem;
  margin-top: 4rem;
  width: 9.6rem;
  height: 3.466667rem;
}

.none_img img {
  width: 9.6rem;
  height: 3.466667rem;
}
</style>